<template>
  <div style="height: 100vh;">
    
    <div style="text-align:center;width: 400px;position:absolute;height:400px;margin-left:30%;padding:50px;background-color:white;border-radius:20px;margin-top:80px">
        <div class="waviy">
        <span style="--i:1">后</span>
        <span style="--i:2">台</span>
        <span style="--i:3">登</span>
        <span style="--i:4">录</span>
    </div>
        <el-form :model="admin" ref="loginForm" :rules="rules">
            <el-form-item prop="username">
                <el-input v-model="admin.username" placeholder="请输入账号" prefix-icon="el-icon-user" size="medium"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <!-- show-password 这里是将密码隐藏 -->
                <el-input v-model="admin.password" placeholder="请输入密码" show-password prefix-icon="el-icon-lock" size="medium"></el-input>
            </el-form-item>
            <el-button type="primary" @click="login">登录</el-button>
        </el-form>
    </div>
    <el-card class="cover" v-if="user.id">
      <!-- 
        accesskey 滑块的误差（默认为5）
        imgs[] 提供图片，自定义背景图
      -->
      <slide-verify :l="42"
            :r="10"
            :w="310"
            :h="155"
            slider-text="向右滑动"
            :accesskey="5"
            :imgs="puzzleImgList"
            @success="onSuccess"
            @fail="onFail"
            @refresh="onRefresh"
            ></slide-verify>
    </el-card>
  </div>
</template>

<script>

// 导入Cookie
import Cookies from 'js-cookie'
import request from '../utils/request';
export default {
    name:'Login',
    data(){
        //  自定义验证规则
      var checkUsername = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('账号不能为空'));
        }
        callback()
      };
      var checkPassword = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('密码不能为空'));
        }
          callback()
      };
      return{
          rules: {
              username:[
                  { validator: checkUsername, trigger: 'blur' }
              ],
              password:[
                  {validator: checkPassword,trigger: 'blur'}
              ]
          },
          admin:{
            username:'',
            password:''
          },
          user:{
            id:''
          },
          puzzleImgList:[
            require('@/assets/img/1.jpg'),
            require('@/assets/img/2.jpg'),
            require('@/assets/img/6.jpg'),
            require('@/assets/img/4.jpg'),
            require('@/assets/img/5.jpg'),
          ]
      }
    },
    methods:{
      login(){
        console.log(this.admin)
        request.post('/admin/login',this.admin).then((res) => {
          if(res.code ==='200'){
            console.log(res)
            this.user.id = res.data
            console.log(this.user)
          }else{
            this.$notify.warning(res.msg)
          }
        })
      },
      onSuccess(){
        if(this.user!=null){
          // 由于Cookie存的是字符串，而后端返回的是JSON格式，所以需要转换格式
          Cookies.set('user',JSON.stringify(this.user))
          console.log(this.admin)
          this.$router.push(`/admin?username=${this.admin.username}&password=${this.admin.password}`)
        }else{
          this.$router.push('/login')
          this.$notify.error("账号或密码错误")
        }
          
      },
      onFail(){
         this.$notify.error('验证失败')
      },
      onRefresh(){
        this.$notify.success('刷新验证')
      }
    }
}
</script>

<style scoped>
.waviy{
  position: relative;
  -webkit-box-reflect: below -10px linear-gradient(transparent,rgba(44, 8, 248, 0.2));
  font-size:60px;
  margin-bottom: 50px;
}
.waviy span{
    font-family: '微软雅黑',cursive;
    position: relative;
    display: inline-block;
    color: rgb(4, 4, 244);
    text-transform: uppercase;
    animation-delay: calc(.1s * var(--i));
}

.cover{
    width:fit-content;
    background-color:white;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:1000;
}
</style>